<template>
  <div id="nav">
    <img src="./assets/logo.png" /><br />
    <router-link to="/" active-class="active">Home</router-link> |
    <router-link to="/about" active-class="active">About</router-link> |
    <button @click="homeClick">编程式导航</button>
    <button @click="queryClick">query</button>
  </div>
  <router-view />
</template>

<script>
import { reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
export default {
  setup() {
    const state = reactive({
      count: 0,
    });
    const router = useRouter();
    const homeClick = () => {
      router.push("/about");
    };
    const queryClick = () => {
      // router.push({
      //   path: '/home',
      //   // name: "about", //注意使用 params 时一定不能使用 path
      //   params: { username: "username" },
      // });
       router.push({
        // path: '/home',
        name: "Home", //注意使用 params 时一定不能使用 path
        // params: { username: "username" },
        query: { username: "username" },
      });
    };

    // https://blog.csdn.net/x550392236/article/details/82761356

    // vue-router.esm-bundler.js?6b05:72 [Vue Router warn]: Path "/home" was passed with params but they will be ignored. Use a named route alongside params instead.

    return {
      ...toRefs(state),
      homeClick,
      queryClick,
    };
  },
};
</script>

<style scoped>
#nav {
  text-align: center;
}
.active {
  color: #f00;
}
</style>